/**
 * 榜单组件
 */

import React, { memo } from 'react';

import { formatImageSize } from "@/utils/format-utils";

import { useDispatch } from "react-redux";
import { getSongDetailAction } from "@/pages/player/store";

import { RankingListWrapper } from "./style";


const RankingList = memo((props) => {
  const { item } = props;
  const tracks = item?.tracks || [];

  /**
   * 拿到id，去匹配歌曲。
   */
  const dispatch = useDispatch();
  const playMusic = (id) => {
    dispatch(getSongDetailAction(id))
  }

  return item ? (
    <RankingListWrapper>
      <div className="header">
        <div className="image">
          <img src={formatImageSize(item.coverImgUrl)} alt={item.name} />
          <a href="/todo" className="image_cover">ranking</a>
        </div>
        <div className="info">
          <a href="/todo">{item.name}</a>
          <div>
            <button className="btn play sprite_02"></button>
            <button className="btn favor sprite_02"></button>
          </div>
        </div>
      </div>

      <div className="list">
        {
          tracks.slice(0, 10).map((item, index) => {
            return (
              <div key={item.id} className="list-item">
                <div className="rank">{index + 1}</div>
                <div className="info">
                  <span className="name text-nowrap">{item.name}</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" onClick={e => playMusic(item.id)}></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>

      <div className="footer">
        <a href="/todo">查看全部 &gt;</a>
      </div>
    </RankingListWrapper>
  ) : null
})

export default RankingList